<template>
  <div id="zlSqQsZzt"  class="chart-container"></div>
</template>

<script>
import {getSqQs} from "@/api/zscq/zlsb/zlsb";
import * as echarts from "echarts";
export default {
  name: "zlSqQsZzt", //专利授权趋势 页面
  created() {
    this.getZlSqQs()
  },
  methods: {
    getZlSqQs() {
      getSqQs().then(res => {
        this.initBT(res.data)
        console.log(res.data, '专利申请趋势数据')
      })
    },
    // 实例化柱状图
    initBT(echartsData) {
      let chartDom = document.getElementById('zlSqQsZzt');
      let myChart = echarts.init(chartDom);
      let option;

      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
      };
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          echartsData: ['发明专利', '实用专利', '外观专利',]
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false, type: 'html',  },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        // 设置 grid 组件来使图表居中，并定义网格区域
        grid: {
          top: '20%',
          bottom: '15%'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: echartsData.yearData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '发明专利',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: echartsData.fmData
          },
          {
            name: '实用专利',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: echartsData.syData
          },
          {
            name: '外观专利',
            type: 'bar',
            // 柱状图显示文字
            // label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: echartsData.wgData
          }
        ]
      };
      option && myChart.setOption(option);
    },
  },
}
</script>

<style scoped>
.chart-container {
  /* 使用100%宽度以适应父元素 */
  width: 100%;
  /* 高度可以是相对于父元素的一个比例 */
  height: calc(100vh - 150px); /* 100vh表示视口高度，减去顶部150px的空间 */
  position: relative; /* 改为相对定位 */
  top: 0;
  left: 0;
}
</style>
